<template>
  <view class="order-detail">
    <view class="order-detail-wait-pay" v-if="orderInfo.orderStatus === 0">
      <span class="order-detail-wait-pay-label">需付款:</span>
      <span class="order-detail-wait-pay-text">¥{{ orderInfo.payPrice }}</span>
    </view>
    <view class="order-detail-signup-info">
      <view class="order-detail-signup-item" style="margin-top: 0" v-if="orderInfo.items && orderInfo.items.length > 0 && orderInfo.items[0].needCourseFlag === '1'"
        ><view class="order-detail-signup-item-label">游泳馆：</view>{{ orderInfo.swimPlaceName }}</view
      >
      <view class="order-detail-signup-item" v-if="orderInfo.items && orderInfo.items.length > 0 && orderInfo.items[0].needCourseFlag === '1'">
        <view class="order-detail-signup-item-label">游泳馆地址:</view>{{ orderInfo.swimPlaceAddress }}</view
      >
      <view class="order-detail-signup-item" v-if="orderInfo.items && orderInfo.items.length > 0 && orderInfo.items[0].needCourseFlag === '1'">
        <view class="order-detail-signup-item-label">游泳课班级:</view
        >{{ orderInfo.swimPlaceClassName }}</view
      >
      <view class="order-detail-signup-item" v-if="orderInfo.items && orderInfo.items.length > 0 && orderInfo.items[0].needCourseFlag === '1'"
        ><view class="order-detail-signup-item-label">游泳课课程:</view
        >{{ orderInfo.courseName }}</view
      >
      <view class="order-detail-signup-item" v-if="orderInfo.items && orderInfo.items.length > 0 && orderInfo.items[0].needCourseFlag === '1'"
        ><view class="order-detail-signup-item-label">上课日期:</view
        >{{ orderInfo.courseStartDate }} ~ {{ orderInfo.courseEndDate }}</view
      >
      <view class="order-detail-signup-item" v-if="orderInfo.items && orderInfo.items.length > 0 && orderInfo.items[0].needCourseFlag === '1'"
        ><view class="order-detail-signup-item-label">上课时间:</view
        >{{ orderInfo.courseStartTime }} ~ {{ orderInfo.courseEndTime }}</view
      >
      <view class="order-detail-signup-item" v-if="orderInfo.items && orderInfo.items.length > 0 && orderInfo.items[0].needCourseFlag === '1'"
        ><view class="order-detail-signup-item-label">上课地址:</view>{{ orderInfo.courseAddress }}</view
      >
      <view class="order-detail-signup-item"
        ><view class="order-detail-signup-item-label">学校:</view>{{ orderInfo.schoolName }}</view
      >
      <view class="order-detail-signup-item"
        ><view class="order-detail-signup-item-label">年级:</view>{{ orderInfo.gradeName }}</view
      >
      <view class="order-detail-signup-item"
        ><view class="order-detail-signup-item-label">班级:</view>{{ orderInfo.className }}</view
      >
      <view class="order-detail-signup-item"
        ><view class="order-detail-signup-item-label">学生:</view>{{ orderInfo.studentName }}</view
      >
    </view>
    <view class="order-detail-goods">
      <view class="order-detail-goods-tip">商品信息</view>
      <view class="order-detail-goods-item" v-if="orderInfo.items && orderInfo.items.length > 0">
        <image
          class="order-detail-goods-item-img"
          mode="aspectFill"
          :src="orderInfo.items[0].goodsCoverImg"
        />
        <view class="order-detail-goods-item-name-num-intro-price">
          <view class="order-detail-goods-item-name-num">
            <view class="order-detail-goods-item-name">
              {{ orderInfo.items[0].goodsName }}
            </view>
            <view class="order-detail-goods-item-num"> X{{ orderInfo.items[0].goodsCount }} </view>
          </view>
          <view class="order-detail-goods-item-intro">
            {{ orderInfo.items[0].goodsIntro }}
          </view>
          <view class="order-detail-goods-item-price">¥{{ orderInfo.items[0].sellingPrice }}</view>
        </view>
      </view>
    </view>
    <view class="order-detail-info">
      <view class="order-detail-info-tip">订单信息</view>
      <view class="order-detail-info-item">
        <view class="order-detail-info-item-label">商品总价:</view>
        <view class="order-detail-info-item-text">¥{{ orderInfo.totalPrice }}</view>
      </view>
      <view class="order-detail-info-item">
        <view class="order-detail-info-item-label">支付方式:</view>
        <view class="order-detail-info-item-text">微信</view>
      </view>
      <view class="order-detail-info-item">
        <view class="order-detail-info-item-label">实付款:</view>
        <view class="order-detail-info-item-text">¥{{ orderInfo.payPrice }}</view>
      </view>
      <view class="order-detail-info-item">
        <view class="order-detail-info-item-label">订单编号:</view>
        <view class="order-detail-info-item-text">{{ orderInfo.orderNo }}</view>
        <view class="order-detail-info-item-copy" @click="handleCopy(orderInfo.orderNo)">复制</view>
      </view>
      <view class="order-detail-info-item">
        <view class="order-detail-info-item-label">提交时间:</view>
        <view class="order-detail-info-item-text">{{ orderInfo.createTime }}</view>
      </view>
      <view class="order-detail-info-item">
        <view class="order-detail-info-item-label">支付时间:</view>
        <view class="order-detail-info-item-text">{{ orderInfo.payTime || '' }}</view>
      </view>
    </view>
    <view
      class="order-detail-bottom"
      v-if="orderInfo.orderStatus === 0 || orderInfo.orderStatus === 2"
    >
      <view
        class="order-detail-bottom-btn-cancel"
        @click="handleCancelOrder"
        v-if="orderInfo.orderStatus === 0"
      >
        取消订单</view
      >
      <view
        class="order-detail-bottom-btn-pay"
        @click="handlePayOrder"
        v-if="orderInfo.orderStatus === 0"
        >立即支付
      </view>
      <view
        class="order-detail-bottom-btn-pay"
        @click="handleReceiptOrder"
        v-if="orderInfo.orderStatus === 2"
      >
        确认收货</view
      >
    </view>
  </view>
</template>

<script setup>
  import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';

  import { WX_LOGIN_INFO } from '@/utils/constants.js';

  import { setItem, getItem } from '@/utils/storage.js';

  import { hideLoading, showLoading, showToast } from '@/utils/app';

  import config from '@/api/config.js';

  import { orderDetail, receiptOrder, cancelOrder, createPrePayOrder } from '@/api/order.js';

  import { getWxCodeInfo } from '@/api/wechat.js';

  const orderInfo = ref({});

  const orderId = ref();
  onLoad((option) => {
    orderId.value = option.orderId;
  });

  onPullDownRefresh(() => {
    orderDetailReq();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onMounted(() => {
    orderDetailReq();
  });

  const orderDetailReq = async () => {
    const res = await orderDetail(orderId.value);
    if (res.code === 200) {
      const data = res.data || {};
      orderInfo.value = data;
    }
  };

  /**复制 */
  const handleCopy = (orderNo) => {
    uni.setClipboardData({
      data: orderNo,
      success: () => {
        uni.showToast({
          title: '已复制到剪贴板',
          icon: 'none',
        });
      },
    });
  };

  /**取消订单 */
  const handleCancelOrder = async () => {
    showLoading('...');
    const res = await cancelOrder(orderId.value);
    if (res.code === 200) {
      hideLoading();
      showToast('取消订单成功');
      uni.$emit('__orderRefresh__');
      orderDetailReq();
    } else {
      hideLoading();
    }
  };

  /**支付订单 */
  const handlePayOrder = () => {
    showLoading('...');
    const wxLoginInfo = getItem(WX_LOGIN_INFO);
    if (wxLoginInfo && wxLoginInfo.openid) {
      const openid = wxLoginInfo.openid;
      createPrePayOrder(openid, orderId.value).then((res) => {
        hideLoading();
        wxPay(res.data);
      });
    } else {
      getWxCodeInfoReq(function (openid) {
        createPrePayOrder(openid, orderId.value).then((res) => {
          hideLoading();
          wxPay(res.data);
        });
      });
    }
  };

  // 获取微信信息
  const getWxCodeInfoReq = (callback) => {
    uni.login({
      success: function (res) {
        const code = res.code;
        getWxCodeInfo({ code }).then((res) => {
          setItem(WX_LOGIN_INFO, res.data);
          const openid = res.data.openid;
          callback(openid);
        });
      },
    });
  };

  const wxPay = (data) => {
    uni.requestPayment({
      timeStamp: data.timeStamp + '',
      nonceStr: data.nonceStr,
      package: data.prepayId,
      signType: data.signType,
      paySign: data.paySign,
      success: function (res) {
        if (res.errMsg == 'requestPayment:ok') {
          uni.showToast({
            title: '支付成功',
            icon: 'success',
          });
          orderDetailReq();
          uni.$emit('__orderRefresh__');
        } else {
          uni.showToast({
            title: res.errmsg,
            icon: 'none',
          });
        }
      },
      fail: function (res) {
        if (res.errMsg == 'requestPayment:fail cancel') {
          uni.showToast({
            title: '支付取消',
            icon: 'none',
          });
        } else {
          uni.showToast({
            title: res.errmsg,
            icon: 'none',
          });
        }
      },
    });
  };

  /**确认收货 */
  const handleReceiptOrder = async () => {
    showLoading('...');
    const res = await receiptOrder(orderId.value);
    if (res.code === 200) {
      hideLoading();
      showToast('操作成功');
      uni.$emit('__orderRefresh__');
      orderDetailReq();
    } else {
      hideLoading();
    }
  };
</script>

<style scoped lang="scss">
  .order-detail {
    display: flex;
    flex-direction: column;
    padding-bottom: 140rpx;

    .order-detail-wait-pay {
      margin-left: 80rpx;
      margin-top: 24rpx;
      display: flex;
      align-items: center;

      .order-detail-wait-pay-label {
        color: #545567;
        font-family: PingFang SC;
        font-size: 32rpx;
        line-height: 36rpx;
      }

      .order-detail-wait-pay-text {
        margin-left: 10rpx;
        color: #000000;
        font-family: DINPro;
        font-weight: 500;
        font-size: 32rpx;
        line-height: 36rpx;
      }
    }

    .order-detail-signup-info {
      display: flex;
      flex-direction: column;
      margin: 24rpx 24rpx 0rpx 24rpx;
      padding: 24rpx;
      border-radius: 16rpx;
      background: #ffffff;

      .order-detail-signup-item {
        display: flex;
        color: #202020;
        font-family: PingFang SC;
        font-size: 28rpx;
        margin-top: 16rpx;
        .order-detail-signup-item-label {
          width: 200rpx;
        }
      }
    }

    .order-detail-goods {
      margin: 24rpx 24rpx 0rpx 24rpx;
      background: #ffffff;
      padding: 24rpx;
      border-bottom: 1rpx solid #e7eff2;
      display: flex;
      flex-direction: column;

      .order-detail-goods-tip {
        padding-bottom: 24rpx;
        color: #545567;
        font-family: PingFang SC;
        font-size: 24rpx;
        border-bottom: 1rpx solid #e7eff2;
      }

      .order-detail-goods-item {
        padding: 24rpx 0rpx;
        display: flex;

        .order-detail-goods-item-img {
          width: 170rpx;
          height: 170rpx;
          border-radius: 8rpx;
          background: #eeeeee;
        }

        .order-detail-goods-item-name-num-intro-price {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-left: 16rpx;

          .order-detail-goods-item-name-num {
            display: flex;

            .order-detail-goods-item-name {
              color: #1f242e;
              font-family: PingFang SC;
              font-size: 26rpx;
              flex: 1;
            }

            .order-detail-goods-item-num {
              margin-left: 24rpx;
              color: #828b94;
              font-family: PingFang SC;
              font-size: 24rpx;
            }
          }

          .order-detail-goods-item-intro {
            margin-top: 8rpx;
            color: #828b94;
            font-family: PingFang SC;
            font-size: 24rpx;
          }

          .order-detail-goods-item-price {
            color: #1f242e;
            font-family: DINPro;
            font-weight: 500;
            font-size: 36rpx;
            margin-top: 8rpx;
          }
        }
      }
    }

    .order-detail-info {
      margin: 24rpx 24rpx 0rpx 24rpx;
      padding: 24rpx;
      border-radius: 16rpx;
      background: #ffffff;
      display: flex;
      flex-direction: column;

      .order-detail-info-tip {
        color: #545567;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
      }

      .order-detail-info-item {
        display: flex;
        align-items: center;
        margin-top: 24rpx;

        .order-detail-info-item-label {
          width: 124rpx;
          color: #1f242e;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
        }

        .order-detail-info-item-text {
          color: #828b94;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          flex: 1;
        }

        .order-detail-info-item-copy {
          padding: 8rpx 12rpx;
          border-radius: 8rpx;
          background: #e2e2e2;
          color: #545567;
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 20rpx;
        }
      }
    }

    .order-detail-bottom {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 104rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0rpx 32rpx;
      background: #ffff;

      .order-detail-bottom-btn-cancel {
        margin-right: 24rpx;
        width: 176rpx;
        height: 72rpx;
        border-radius: 24rpx;
        border: 1rpx solid #828b94;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4e5969;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
      }

      .order-detail-bottom-btn-pay {
        width: 176rpx;
        height: 72rpx;
        border-radius: 24rpx;
        background: linear-gradient(138.98deg, #cb3d3d 0.5%, #a11012 100.24%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }
</style>
